<template>
  <div>
    <a-modal
      title="货币结算配置"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="40%"
    >
      <template slot="footer" class="modelBtn">
        <a-button @click="handleCancel">取消</a-button>
        <a-button :loading="loading" @click="handleOk" type="primary"
          >确认</a-button
        >
      </template>
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="formDataRules"
        class="fromData"
      >
        <a-form-model-item ref="currency" label="币种" prop="currency">
          <a-input :maxLength="128" v-model="formData.currency" size="small" />
        </a-form-model-item>
        <a-form-model-item
          ref="exchangeCurrency"
          label="兑换币种"
          prop="exchangeCurrency"
        >
          <a-input :maxLength="128" v-model="formData.exchangeCurrency" size="small" />
        </a-form-model-item>
        <a-form-model-item ref="streamRate" label="实时汇率" prop="streamRate">
          <a-input :maxLength="128" v-model="formData.streamRate" size="small" />
        </a-form-model-item>
        <a-form-model-item
          ref="exchangeStreamRate"
          label="兑换实时汇率"
          prop="exchangeStreamRate"
        >
          <a-input :maxLength="128" v-model="formData.exchangeStreamRate" size="small" />
        </a-form-model-item>
        <a-form-model-item
          ref="isCurrency"
          label="是否交易币种"
          prop="isCurrency"
        >
          <div>
            <a-switch
              :default-checked="formData.isCurrency == 0"
              @change="changeIsCurrency"
            />
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import {
  para_addCurrency,
  para_editCurrency,
  para_searchCurrency
} from "@/apis/system/setManage/parameterize";
export default {
  props: ["getTableList"],
  data() {
    return {
      visible: false,
      loading: false,
      handleFlag: "",
      formDataRules: {},
      formData: {
        currency: null,
        exchangeCurrency: null,
        exchangeStreamRate: null,
        isCurrency: 1,
        streamRate: null
      }
    };
  },
  created() {},
  mounted() {
    this.$bus.$off("addCurrency");
    this.$bus.$on("addCurrency", flag => {
      this.handleFlag = flag;
      this.visible = true;
    });
    this.$bus.$off("editCurrency");
    this.$bus.$on("editCurrency", async (row, flag) => {
      let res = await para_searchCurrency(row.sysCurrencyId);
      if (res.code == "200") {
        this.formData = res.responseBody;
      }
      this.handleFlag = flag;
      this.visible = true;
    });
  },
  methods: {
    changeIsCurrency(e) {
      if (e) {
        this.formData.isCurrency = 0;
      } else {
        this.formData.isCurrency = 1;
      }
    },
    async handleOk() {
      this.loading = true;
      if (this.handleFlag == "add") {
        let res = await para_addCurrency(this.formData);
        if (res.code == "10000") {
          this.getTableList();
          this.handleCancel();
          this.loading = false;
        }
      } else if (this.handleFlag == "edit") {
        let res = await para_editCurrency(
          this.formData.sysCurrencyId,
          this.formData
        );
        if (res.code == "10000") {
          this.getTableList();
          this.handleCancel();
          this.loading = false;
        }
      }
    },
    handleCancel() {
      this.visible = false;
      setTimeout(() => {
        this.formData = {
          currency: null,
          exchangeCurrency: null,
          exchangeStreamRate: null,
          isCurrency: 1,
          streamRate: null
        };
      }, 50);
    },
    changeIsSelf(e) {
      if (e) {
        this.formData.isSelf = 0;
      } else {
        this.formData.isSelf = 1;
      }
    },
    changeWaybillCountry(value, option) {
      console.log(value, option);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.fromData {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  justify-content: space-between;
  .ant-form-item {
    display: flex;
    width: 50%;
    .ant-form-item-label {
      width: 120px;
      text-align: right;
    }
    .ant-form-item-control-wrapper {
      width: 70%;
    }
  }
}
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
  .ant-btn {
    margin-right: 10px;
  }
}
</style>
